<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import tableList from "@/components/tableList/tableList.vue";
import {useRouter} from 'vue-router'
import {useDevice} from '@/hooks/web/useDevice'
import {payList} from "@/api/payment";

const {mobile} = useDevice()
import {useCommon} from '@/hooks/web/useCommon'
import PayDrawer from "@/views/pay-management/component/PayDrawer.vue";
import {usePermissions} from "@/hooks/web/usePermissions";
import {useStorage} from "@/hooks/web/useStorage";

const {getStorage, setStorage, removeStorage} = useStorage()
const {permissions, fetchPermissions} = usePermissions()
const {
  searchForm,
  optionsBox,
  mobileShow,
  teacherOptions,
  schoolOptions,
  getTeacher,
  fetchDataBox,
  gatherOptions,
  pageData
} = useCommon()

onMounted(() => {
  let flag = getStorage('payFlag')
  let searchItem = getStorage('payForm');
  if (flag && searchItem) {
    pageData.currentPage = searchItem.page
    pageData.pageSize = searchItem.limit
    Object.assign(searchForm, searchItem)
  } else {
    removeStorage('payForm')
  }
  fetchPermissions()
  fetchData()
  getTeacher('')
  fetchDataBox('school', '')
  gatherOptions()
  permissions.info ? tableHeader[1].type = 'btn' : tableHeader[1].type = ''
})

onBeforeUnmount(() => {
  removeStorage('payFlag')
})

const router = useRouter()
let drawerVisible = ref(false)
let tableData = ref([])
let loading = ref(false)
let payDrawer = ref('')
let searchFormRef = ref('')
const tableHeader = reactive([
  {label: '报考院校', prop: 'school_name'},
  {
    label: '学生姓名', prop: 'realname', type: 'btn', method: (row) => {
      handleDetail(row)
    }
  },
  {label: '学位项目', prop: 'project'},
  {label: '入学时间', prop: 'ruxue'},
  {label: '电话号码', prop: 'laidian'},
  {label: '学生来源', prop: 'laiyuan'},
  {label: '来源详情', prop: 'laiyuan_xiangqing'},
  {label: '招生老师', prop: 'teacher_name'},
  {label: '合作人', prop: 'hezuoren'}
])

const tableOptions = {
  label: '操作',
  width: '150px',
  value: 0,
  options: [
    {
      label: '查看缴费信息',
      key: 0,
      type: 'text',
      method: (row) => {
        handlePay(row)
      },
      icon: 'right'
    }
  ]
}

const handleDetail = (row) => {
  setStorage('payForm', searchForm)
  router.push({path: '/pay-management/info', query: {student_id: row.student_id, flag: 'payFlag'}})
}


const handlePay = (row) => {
  console.log(row);
  drawerVisible.value = true
  payDrawer.value.payInfo = Object.assign(payDrawer.value.payInfo, {
    school: row.school_name,
    name: row.realname,
    id: row.student_id
  })
  payDrawer.value.fetchInfo()
}
const onSearch = () => {
  pageData.currentPage = 1
  fetchData();
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

const handleReset = () => {
  searchFormRef.value.resetFields()
}

const fetchData = async () => {
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await payList(params)
  loading.value = false
  if (res) {
    tableData.value = res.data.list
    pageData.total = res.data.page.amount
  }
}

</script>
<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchFormRef">
        <el-form-item label="学生姓名" prop="realname" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入学生姓名" v-model="searchForm.realname">
          </el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="laidian" v-show="mobileShow || !mobile">
          <el-input clearable placeholder="请输入联系方式" v-model="searchForm.laidian">
          </el-input>
        </el-form-item>
        <el-form-item label="报考院校" v-show="mobileShow || !mobile" prop="school_id">
          <el-select placeholder="请选择报考院校" v-model="searchForm.school_id">
            <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="招生老师" :prop="teacherOptions.length === 1 ? '' : 'zixun'"
                      v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.zixun" placeholder="请选择原招生老师" clearable :disabled="teacherOptions.length === 1">
            <el-option label="未绑定" value="0"></el-option>
            <el-option v-for="(item, index) in teacherOptions" :label="item.name" :value="item.name"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生来源" prop="laiyuan" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.laiyuan" placeholder="请选择学生来源" clearable>
            <el-option v-for="(item, index) in optionsBox.laiyuan_list" :label="item.name" :value="item.value"
                       :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间" prop="ruxue" v-show="mobileShow || !mobile">
          <el-select v-model="searchForm.reg_date" placeholder="请选择注册时间" clearable>
            <el-option v-for="(item,index) in optionsBox.register_list"
                       :label="item.name"
                       :value="item.value"
                       :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-show="mobile" plain @click="mobileShow = !mobileShow">{{
              mobileShow ? '取消高级查询' : '高级查询'
            }}
          </el-button>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" v-loading="loading">
      <tableList :table-data="tableData"
                 :table-options="tableOptions"
                 :page-data="pageData"
                 @handle-page-change="handlePageChange"
                 :table-header="tableHeader"></tableList>
    </el-col>
  </el-row>
  <pay-drawer :drawer-visible="drawerVisible" :device="mobile" @handleClose="drawerVisible = false"
              ref="payDrawer"></pay-drawer>
</template>

<style scoped lang="less">
/deep/ .el-input-form .el-input {
  width: 192px;
}
</style>